<template>
	<view
		class="comment-block"
		v-if="isShow"
	>
		<view
			class="mask"
			@click="hide"
		></view>
		<view
			class="c-block"
			:style="{ top: top + 'px' }"
		>
			<view class="input">
				<u--textarea
					v-model="input"
					placeholder="我就知道你想说些什么~"
					class="comment-textarea"
					border="none"
					:focus="true"
					:adjust-position="true"
				></u--textarea>
				<view class="bottom">
					<span class="left-font">剩余{{ remainingCharacters }}字</span>
					<view class="btn">
						<u-button
							text="发送"
							type="primary"
							style="width: 20%; margin-top: 10px; margin-bottom: 10px"
							size="small"
							throttleTime="500"
							@click="sendComment"
							:disabled="isDisabled"
						></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { addComment } from '@/common/api/cardApi.js';
export default {
	name: 'comment-block',
	data() {
		return {
			input: '',
			isShow: false,
			loading: false,
			loadingText: '发送中',
			disabled: false,
			top: 800
		};
	},
	props: {
		cardDatas: {
			type: Object
		}
	},
	computed: {
		remainingCharacters() {
			return 100 - this.input.length;
		},
		isDisabled() {
			return this.input.length === 0 || this.input.length > 100;
		},
		...mapState({
			userInfo: (state) => state.user.userInfo
		})
	},
	methods: {
		clear() {
			this.input = '';
		},
		hide() {
			this.isShow = false;
		},
		show() {
			this.isShow = true;
		},
		sendComment() {
			if (this.input === '') {
				uni.showToast({
					title: '输入的内容为空',
					icon: 'error'
				});
			} else {
				const content = this.input;
				const commenterId = this.userInfo.id;
				const cardId = this.cardDatas._id;
				const commentBody = {
					content,
					commenterId,
					cardId
				};
				// console.log(commentBody);
				addComment(commentBody).then((res) => {
					const content = this.input;
					this.input = '';
					this.isShow = false;
					uni.$emit('reloadComment', content);
				});
			}
		}
	},
	watch: {
		isShow(newVal) {
			let keyBoardHeight;
			uni.onKeyboardHeightChange((res) => {
				keyBoardHeight = res.height;
			});
			if (newVal) {
				setInterval(() => {
					this.top = 432;
				}, 10);
			}
		}
	},
	mounted() {
		uni.$on('showMask', this.show);
	}
};
</script>

<style lang="scss">
.comment-block {
	width: 100%;
	height: 100%;
	// background-color: #fff;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: 3;
	.mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	.c-block {
		width: 100%;
		height: 150px;
		position: fixed;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		transition: 0.5s;
		.input {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.comment-textarea {
				width: 90%;
				background-color: #eee;
				margin-top: 10px;
			}
			.bottom {
				width: 80%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left-font {
					font-size: 12px;
					color: #999;
				}
			}
		}
	}
}
</style>
